<!--
 * @description: 
 * @Author: vikingShip
 * @Date: 2021-11-11 13:25:57
 * @LastEditors: jian
 * @LastEditTime: 2022-01-05 14:11:18
-->
<template>
  <div>
    <div v-for="(item, index) in commoditySpecs" :key="index" class="norm">
      <div class="norm__item">
        <div class="norm__title">{{ item.title }}</div>
        <div class="norm__block">
          <div v-for="(ite, inde) in item.list" :key="inde" class="norm__options" :class="{
              option: optionSpec.indexOf(ite) > -1,
              active: chooseSpec.indexOf(ite) > -1,
            }" @click="chooseSpecHandle(optionSpec.indexOf(ite) > -1, ite, index)">
            {{ ite }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang='ts'>
import { Component, Vue, Prop } from "vue-property-decorator";
import GoodNormClass from "./goodNorm";
@Component
export default class CommoditySpec extends Vue {
  @Prop()
  classArr;
  @Prop()
  list;
  data = [
    // {
    //   id: "1",
    //   specs: ["紫色", "套餐一", "64G"],
    // },
    // {
    //   id: "2",
    //   specs: ["紫色", "套餐一", "128G"],
    // },
    // {
    //   id: "3",
    //   specs: ["紫色", "套餐二", "128G"],
    // },
    // {
    //   id: "4",
    //   specs: ["黑色", "套餐三", "256G"],
    // },
    {
      id: "4",
      specs: ["黑色"],
    },
    {
      id: "4",
      specs: ["紫色"],
    },
  ];
  commoditySpecs = [
    {
      title: "颜色",
      list: ["红色", "紫色", "白色", "黑色"],
    },
    // {
    //   title: "套餐",
    //   list: ["套餐一", "套餐二", "套餐三", "套餐四"],
    // },
    // {
    //   title: "内存",
    //   list: ["64G", "128G", "256G"],
    // },
  ];
  optionSpec: string[] = [];
  chooseSpec: string | undefined[] = [];
  mounted() {
    this.commoditySpecs = this.filterClassArrField(this.classArr);
    this.data = this.filterListField(this.list);

    const newGoodNormClass = new GoodNormClass(this.commoditySpecs, this.data);
    this.chooseSpec = Array.from({ length: this.commoditySpecs.length });
    this.optionSpec = newGoodNormClass.querySpecsOptions(this.chooseSpec);

    // console.log("0000", this.classArr);
    // console.log("1111", this.filterClassArrField(this.classArr));
    // console.log("222", this.filterListField(this.list));

    // console.log(newGoodNormClass.querySpecsOptions([undefined, undefined, undefined]));
  }
  chooseSpecHandle(flag: boolean, value: string, index: number) {
    const newGoodNormClass = new GoodNormClass(this.commoditySpecs, this.data);
    if (this.chooseSpec[index] !== value && !flag) return;
    this.chooseSpec[index] = this.chooseSpec[index] === value ? "" : value;
    this.chooseSpec = this.chooseSpec.slice();
    this.optionSpec = newGoodNormClass.querySpecsOptions(this.chooseSpec);
    console.log("chooseSpec", this.chooseSpec);
    console.log(
      "optionSpec",
      newGoodNormClass.querySpecsOptions(this.chooseSpec),
    );
  }
  filterClassArrField(specArr) {
    return specArr.map((item) => {
      return {
        title: item.name,
        list: item.children.map((item) => {
          return item.name;
        }),
      };
    });
  }
  filterListField(list) {
    return list.map((item) => {
      return {
        id: item.id,
        specs: item.productSpecNames,
      };
    });
  }
  getChooseSpecsId() {
    this.filterListField(this.list).filter((item) => {
      return this.equar(item.specs, this.chooseSpec);
    });
  }
  equar(a, b) {
    // 判断数组的长度
    if (a.length !== b.length) {
      return false;
    } else {
      // 循环遍历数组的值进行比较
      for (let i = 0; i < a.length; i++) {
        if (a[i] !== b[i]) {
          return false;
        }
      }
      return true;
    }
  }
}
</script>
<style scoped>
.norm__block {
  display: flex;
}
.norm__options {
  color: gray;
}
.option {
  color: black;
}
.active {
  color: red;
}
</style>